<template>
  <div class="pending">
    <div>
      <div class="allpay-list">
          <div class="img-box">
            <div class="img-content" 
              :style="{'background':'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'}"
            >
              <img src="@/assets/images/ic_pickages.png" alt="">
              <!-- <i class="icon iconfont" v-html="message.icon"></i> -->
            </div>
          </div> 
          <div class="pay-content">
            <span>{{message.type.name}}-{{message.residential_text}}</span>
            <div class="paytext">
              <span style="font-size:.28rem;color:red;">金额&nbsp;¥&nbsp;{{message.cost}}元</span>
            </div>
            <div style="text-align:left;left:0;">{{message.starttime_text}}</div>
            <div class="gopay" @click="moneypay" style="font-size:.28rem;text-align:center;color:#ee5a8a;">立即缴费</div>
          </div>
      </div>
    </div>
  </div>  
</template>
<script>
import api from '../../../api/api.js'
export default {
  props:{
    message:{
      type:Object
    },
    // sty:{
    //   type: String
    // }
  },
  data(){
    return{
      
    }
  },
  created(){
    console.log('111',this.sty)
  },
  methods:{
    moneypay(){
      var back_url=encodeURIComponent(encodeURIComponent(window.location.href));
      window.location.href =  api.moneypay + '?id='+this.message.id+'&way='+this.message.way+'&back_url='+ back_url;
    }
  }
}
</script>

<style scoped>
.allpay-list{
  display: flex;
  height: 2rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.img-box{
  flex: 1.5;
}
.img-content{
  position: relative;
  margin: .38rem auto 0;
  width:1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #0EAD69;
}

.img-content img{
  position: absolute;
  left: calc(50% - .21rem);
  top: calc(50% - .22rem);
  width: .42rem;
  height: .44rem;
}
.pay-content{
  position: relative;
  flex: 3;
  padding-top: .28rem;
}
.pay-content span{
  display: block;
  line-height: .5rem;
}
.gopay{
  font-weight: bold;
  position: absolute;
  right: .3rem;
  bottom: .4rem;
}
.pay-content .paytext{
  display: flex;
}
.pay-content .paytext span{
  flex: 1;
  line-height: .5rem;
}
.newsbox{
  position: relative;
}
.news{
  display: block;
  position: absolute;
  right: 20%;
  top: 18%;
  width: .15rem;
  height: .15rem;
  text-align: center;
  border-radius: 50%;
  background: #FF001f;
}
</style>

